//1.获取画布对象
var canvas = document.getElementById("canvas");
//2.设置绘画环境，2D或者3D
var ctx = canvas.getContext("2d");//2d必须是小写
//3.画网格
paintCell();
//4.画蛇身
// 初始化蛇身（默认开始占四个网格）
var snake_len = 4;
var snake_body = [];//用数组存储

//延迟加载蛇身（先加载网格和食物）
window.onload = function () {
    init_snake();
    //蛇的移动（根据状态（direct）去移动）
}

//5.定义食物坐标（在网格中随机出现一个）
var foodX;
var foodY;
add_food();//定义食物坐标，在paint_snack_body（）中画食物

//6.蛇的移动
var direct = 3;


//7.蛇吃食物
//设置食物颜色
var color = ["#DC7471", "#DE911B", "#B5BF29", "#86DA1A", "#0FE667", "#0FE667", "#0FE667", "#B30FE6", "#E24964"];
var color_num = 0;

//8.定义游戏规则
var set_interval;//用于控制蛇的移动速度

//9.开始游戏
function startGame() {
    var start = document.getElementById("start")
    var value = start.getAttribute("value");
    if (value == 1) {
        document.getElementById("start_btn").play();//添加音乐
        set_interval = setInterval(snake_move, 200);
        start.innerHTML = "暂停游戏";
        start.style.background = "#4986BB";
        start.setAttribute("value", 2);
    }
    if (value == 2) {
        document.getElementById("start_btn").play();//添加音乐
        clearInterval(set_interval);
        start.innerHTML = "开始游戏";
        start.style.background = "#5cb85c";
        start.setAttribute("value", 1);
    }
    if (value == 3) {
        document.getElementById("dead").play();//添加音乐
        var res = window.confirm("你死翘翘了");
    }
}

//10.重新开始
function replay() {
    window.location.reload();
}

//画网格
function paintCell() {
    ctx.beginPath();//开始画
    //ctx.moveTo(0,100)//定义起点
    //ctx.lineTo(100,100)//定义终点
    //ctx.stroke();//喷墨 
    var s = 600;
    for (var i = 0; i < s; i += 40) {
        //画横线
        ctx.moveTo(0, i);//定义起点
        ctx.lineTo(s, i);//定义终点
        //画竖线
        ctx.moveTo(i, 0);
        ctx.lineTo(i, s);
    }
    //喷墨
    ctx.stroke();
}

//11.初始化分数
var score = 0;

//12. 添加音乐
//有按钮音乐，吃食物音乐，死亡音乐，游戏背景音乐	


//13.文字图片不能选中
document.onselectstart = function () {
    return false;
}

//初始化蛇身的坐标（默认初始化蛇身占有四个网格，在最左上角，横向排列）
function init_snake() {
    for (var i = 0; i < snake_len; i++) {
        //初始化四个方格的左上角坐标（再定义方格的宽度和高度就能画出完整的方格）
        snake_body[i] = {x: i * 40, y: 40};//每个方格长宽都是40
    }
    paint_snack_body();//画矩形的蛇身
}

//画蛇身，用颜色填充，画成矩形【ctx.rect(x,y,width,height):没有填充的矩形】
function paint_snack_body() {
    for (var i = 0; i < snake_len; i++) {
        ctx.fillRect(snake_body[i].x, snake_body[i].y, 40, 40)
        //蛇身连在一起，需要划线分割开（用户体验会好很多）
        //解决办法：围着每个小方格最外围画上不同颜色的线条将其保围即可
        ctx.beginPath();
        ctx.strokeStyle = "#4a4a4a";//设置墨的颜色
        ctx.moveTo(snake_body[i].x, snake_body[i].y);
        ctx.lineTo(snake_body[i].x + 40, snake_body[i].y)
        ctx.lineTo(snake_body[i].x + 40, snake_body[i].y + 40)
        ctx.lineTo(snake_body[i].x, snake_body[i].y + 40)
        ctx.lineTo(snake_body[i].x, snake_body[i].y)//可以用ctx.closePath()闭合最后一个点
        ctx.stroke();

    }
    ctx.fillStyle = color[color_num];
    ctx.fillRect(foodX, foodY, 40, 40);//画食物
}

//添加食物（食物出现的位置是随机的）
function add_food() {
    foodX = Math.floor(Math.random() * 15) * 40;
    foodY = Math.floor(Math.random() * 15) * 40
}

//蛇的移动(实际上是数组的添加和删除)
function snake_move() {
//添加一个方格对象到最后
    switch (direct) {
        case 1://左键
            snake_body.push({x: snake_body[snake_len - 1].x - 40, y: snake_body[snake_len - 1].y})
            break;
        case 2://上键
            snake_body.push({x: snake_body[snake_len - 1].x, y: snake_body[snake_len - 1].y - 40})
            break;
        case 3://右键
            snake_body.push({x: snake_body[snake_len - 1].x + 40, y: snake_body[snake_len - 1].y})
            break;
        case 4://下键
            snake_body.push({x: snake_body[snake_len - 1].x, y: snake_body[snake_len - 1].y + 40})
            break;
    }
//删除第一个方格对象
    snake_body.shift();

//清空画布(网格和蛇身都被清除了)
    ctx.clearRect(0, 0, 600, 600);
//游戏规则
    gameRule();
//蛇吃食物
    eatFood();
//重新画网格和蛇身
    paintCell();
    paint_snack_body();

}

//设置方向状态
function getKeyCodeToMove(keyCode) {
    switch (keyCode) {
        case 37://左键
            direct = 1;
            break;
        case 38://上键
            direct = 2;
            break;
        case 39://右键
            direct = 3;
            break;
        case 40://下键
            direct = 4;
            break;
    }
}

//添加键盘监听（键盘按下时会触发）
document.onkeydown = function (e) {
    var key = e || window.event;//兼容性写法
    var keyCode = e.keyCode;
    getKeyCodeToMove(keyCode);
}

//蛇吃食物
function eatFood() {
    if (snake_body[snake_len - 1].x == foodX && snake_body[snake_len - 1].y == foodY) {
        document.getElementById("eat").play();
        color_num = Math.floor(Math.random() * 10);
        snake_len++;
        score += 5;
        document.getElementById("score_num").innerHTML = score;
        //向数组添加新的元素，并返回这个新的元素（没有创建新的对象，是对原数组的修改）
        snake_body.unshift({x: -40, y: -40});
        add_food();//添加新的食物（因为每隔固定的时间就会清空画板，所以没必要单独去清空食物）

    }
}


//定义游戏规则
function gameRule() {
//碰到边界，结束游戏
    if (snake_body[snake_len - 1].x > 560
        || snake_body[snake_len - 1].x < 0
        || snake_body[snake_len - 1].y > 560
        || snake_body[snake_len - 1].y < 0) {
        clearInterval(set_interval);//结束游戏	
        document.getElementById("dead").play();
        //重置开始游戏按钮
        var start = document.getElementById("start");
        start.innerHTML = "游戏结束";
        start.style.background = "#d9534f";
        start.setAttribute("value", 3);
    }
//碰到自己，游戏结束
    for (var i = 0; i < snake_len - 1; i++) {
        if (snake_body[snake_len - 1].x == snake_body[i].x
            && snake_body[snake_len - 1].y == snake_body[i].y) {
            clearInterval(set_interval);//结束游戏
            document.getElementById("dead").play();
            //重置开始游戏按钮
            var start = document.getElementById("start");
            start.innerHTML = "游戏结束";
            start.style.background = "#d9534f";
            start.setAttribute("value", 3);
        }
    }
}